<template>
  <el-container class="app-container">
    <el-main>
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <SearchFormCard :show-further-btn="false">
          <template slot="btns">
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button v-permission="['POST /admin/sysdic/save']" style="float: left" class="filter-item" type="primary" icon="el-icon-plus" @click="handleEidt()">新增</el-button>
          </template>
          <template slot="common">
            <el-input
              v-model="listQuery.typeName"
              clearable
              class="filter-item"
              style="width: 200px;"
              placeholder="请输入类别名"/>
            <el-input
              v-model="listQuery.typeCode"
              clearable
              class="filter-item"
              style="width: 200px;"
              placeholder="请输入类别编号"/>
            <el-input
              v-model="listQuery.code"
              clearable
              class="filter-item"
              style="width: 200px;"
              placeholder="请输入值"/>
            <el-input
              v-model="listQuery.codeText"
              clearable
              class="filter-item"
              style="width: 200px;"
              placeholder="请输入内容"/>
          </template>
        </SearchFormCard>
      </div>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        size="small"
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"/>
        <el-table-column
          prop="typeCode"
          header-align="center"
          align="center"
          label="类别"/>
        <el-table-column
          prop="typeName"
          header-align="center"
          align="center"
          label="类别名"/>
        <el-table-column
          prop="code"
          header-align="center"
          align="center"
          label="值"/>
        <el-table-column
          prop="codeText"
          header-align="center"
          align="center"
          label="值描述"/>
        <el-table-column
          prop="pid"
          header-align="center"
          align="center"
          label="父级"/>
        <el-table-column
          prop="lever"
          header-align="center"
          align="center"
          label="排序"/>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="创建时间"/>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button v-permission="['POST /admin/sysdic/save']" type="text" icon="el-icon-edit" plain size="mini" @click="handleEidt(scope.row)">编辑</el-button>
            <el-button v-permission="['POST /admin/sysdic/delete']" type="text" icon="el-icon-delete" plain size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
      </el-table-column></el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"/>
    </el-main>
    <dic-save
      v-if="edit"
      ref="dicSave"
      :data="editForm"
      @refreshDataList="edit=false;getList()"
      @dialogClosed="edit=false"/>
  </el-container>
</template>
<style>
</style>
<script>
import { fetchList, handleBtnClick } from '@/api/list'
import { deletes } from '@/api/dic'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import SearchFormCard from '@/components/SearchFormCard' // 搜索表单
import dicSave from '@/views/sysDic/sysdic-add-or-update'

export default {
  name: 'DicIndex',
  components: { Pagination, SearchFormCard, dicSave },
  data() {
    return {
      url: '/sysdic/list',
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        typeName: ``,
        typeCode: '',
        code: '',
        codeText: '',
        page: 1,
        limit: 10
      },
      editForm: {},
      edit: false,
      downloadLoading: false
    }
  },
  watch: {
    listQuery: {
      handler: function(val, oldval) {
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      fetchList(this)
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleEidt(row) {
      this.edit = true
      this.editForm = row || {}
    },
    handleDelete(id) {
      handleBtnClick(this, deletes, [id], 'del')
    }
  }
}
</script>
